<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调报告生成 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7fa;
        }
        .nav-item:hover {
            background-color: rgba(64, 158, 255, 0.1);
        }
        .active-nav {
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center h-16">
                    <!-- 左侧logo -->
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/40x40?text=消防" alt="Logo" class="h-10 w-10">
                        <span class="ml-2 text-xl font-bold text-gray-800">火灾调查知识库平台</span>
                    </div>
                    
                    <!-- 中间导航菜单 -->
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-brain mr-1"></i> AI检索功能
                        </a>
                        <a href="report-generator.html" class="nav-item active-nav px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-dashboard.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                    </nav>
                    
                    <!-- 右侧用户信息 -->
                    <div class="flex items-center space-x-4">
                        <a href="personal-center.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-user-circle"></i> 个人中心
                        </a>
                        <a href="login.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                        <a href="register.html" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主体内容区 -->
        <main class="container mx-auto px-4 py-6">
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-gray-800">火灾调查报告生成</h1>
                <p class="text-gray-600 mt-2">智能生成规范专业的火灾调查报告，辅助火灾调查工作</p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 左侧工具栏 -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="font-medium text-gray-800 mb-3">报告模板</h3>
                        <div class="space-y-2">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="reportType" class="form-radio text-blue-500" checked>
                                <span class="ml-2 text-sm">标准火灾调查报告</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="reportType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">重大火灾调查报告</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="reportType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">简易火灾调查报告</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="reportType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">火灾事故分析报告</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="reportType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">自定义模板</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="font-medium text-gray-800 mb-3">智能助手</h3>
                        <div class="space-y-2">
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-md">
                                <i class="fas fa-robot mr-1"></i> 询问笔录助手
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-green-50 hover:bg-green-100 text-green-600 rounded-md">
                                <i class="fas fa-camera mr-1"></i> 现场勘验助手
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-purple-50 hover:bg-purple-100 text-purple-600 rounded-md">
                                <i class="fas fa-microscope mr-1"></i> 物证分析专家
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-yellow-50 hover:bg-yellow-100 text-yellow-600 rounded-md">
                                <i class="fas fa-bolt mr-1"></i> 电气火灾专家
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-md">
                                <i class="fas fa-fire mr-1"></i> 燃气火灾分析
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 rounded-md">
                                <i class="fas fa-balance-scale mr-1"></i> 法律顾问
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <h3 class="font-medium text-gray-800 mb-3">报告历史</h3>
                        <div class="space-y-2">
                            <a href="#" class="block p-2 hover:bg-gray-50 rounded-md">
                                <div class="text-sm font-medium">某商场电气火灾调查报告</div>
                                <div class="text-xs text-gray-500 mt-1">2023-09-15</div>
                            </a>
                            <a href="#" class="block p-2 hover:bg-gray-50 rounded-md">
                                <div class="text-sm font-medium">住宅楼厨房燃气泄漏火灾</div>
                                <div class="text-xs text-gray-500 mt-1">2023-08-22</div>
                            </a>
                            <a href="#" class="block p-2 hover:bg-gray-50 rounded-md">
                                <div class="text-sm font-medium">工厂仓库易燃物起火事故</div>
                                <div class="text-xs text-gray-500 mt-1">2023-07-10</div>
                            </a>
                            <a href="#" class="block p-2 hover:bg-gray-50 rounded-md">
                                <div class="text-sm font-medium">办公楼电线短路火灾</div>
                                <div class="text-xs text-gray-500 mt-1">2023-06-05</div>
                            </a>
                        </div>
                        <div class="mt-3 text-center">
                            <a href="#" class="text-sm text-blue-500 hover:text-blue-700">查看全部历史</a>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧主内容区 -->
                <div class="lg:col-span-3">
                    <!-- 步骤导航 -->
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <div class="flex justify-between items-center">
                            <div class="w-1/5 text-center">
                                <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto">
                                    <i class="fas fa-info"></i>
                                </div>
                                <div class="mt-2 text-sm font-medium text-blue-500">案件信息</div>
                            </div>
                            <div class="w-1/5 text-center">
                                <div class="w-10 h-10 bg-gray-200 text-gray-500 rounded-full flex items-center justify-center mx-auto">
                                    <i class="fas fa-file-upload"></i>
                                </div>
                                <div class="mt-2 text-sm font-medium text-gray-500">材料上传</div>
                            </div>
                            <div class="w-1/5 text-center">
                                <div class="w-10 h-10 bg-gray-200 text-gray-500 rounded-full flex items-center justify-center mx-auto">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <div class="mt-2 text-sm font-medium text-gray-500">调查分析</div>
                            </div>
                            <div class="w-1/5 text-center">
                                <div class="w-10 h-10 bg-gray-200 text-gray-500 rounded-full flex items-center justify-center mx-auto">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <div class="mt-2 text-sm font-medium text-gray-500">结论认定</div>
                            </div>
                            <div class="w-1/5 text-center">
                                <div class="w-10 h-10 bg-gray-200 text-gray-500 rounded-full flex items-center justify-center mx-auto">
                                    <i class="fas fa-file-alt"></i>
                                </div>
                                <div class="mt-2 text-sm font-medium text-gray-500">报告生成</div>
                            </div>
                        </div>
                        <div class="relative mt-4">
                            <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2"></div>
                            <div class="absolute top-1/2 left-0 w-1/12 h-1 bg-blue-500 -translate-y-1/2"></div>
                        </div>
                    </div>
                    
                    <!-- 案件信息表单 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-4">案件基本信息</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">案件名称</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
                                    placeholder="例如：某商场电气火灾事故">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">案件编号</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
                                    placeholder="例如：XF-2023-0015">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">火灾发生时间</label>
                                <input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">火灾报警时间</label>
                                <input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">到场时间</label>
                                <input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">火灾扑灭时间</label>
                                <input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">火灾发生地点</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
                                    placeholder="例如：北京市朝阳区XX路XX号XX大厦">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">火灾等级</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option>请选择</option>
                                    <option>特别重大火灾</option>
                                    <option>重大火灾</option>
                                    <option>较大火灾</option>
                                    <option>一般火灾</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">建筑类型</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option>请选择</option>
                                    <option>住宅建筑</option>
                                    <option>商业建筑</option>
                                    <option>工业建筑</option>
                                    <option>办公建筑</option>
                                    <option>公共建筑</option>
                                    <option>其他建筑</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">火灾类型</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option>请选择</option>
                                    <option>电气火灾</option>
                                    <option>燃气火灾</option>
                                    <option>可燃液体火灾</option>
                                    <option>易燃固体火灾</option>
                                    <option>其他类型</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">伤亡情况</label>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-xs text-gray-500 mb-1">死亡人数</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" min="0" value="0">
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 mb-1">重伤人数</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" min="0" value="0">
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 mb-1">轻伤人数</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" min="0" value="0">
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 mb-1">财产损失(万元)</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" min="0" step="0.01" value="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">火灾简要描述</label>
                            <textarea rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
                                placeholder="请简要描述火灾发生、发展和扑救的情况..."></textarea>
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">调查人员信息</label>
                            <div class="border border-gray-200 rounded-md overflow-hidden">
                                <table class="w-full text-sm">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2 text-left">姓名</th>
                                            <th class="px-4 py-2 text-left">职务</th>
                                            <th class="px-4 py-2 text-left">单位</th>
                                            <th class="px-4 py-2 text-left">联系方式</th>
                                            <th class="px-4 py-2 text-center">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr>
                                            <td class="px-4 py-2">张三</td>
                                            <td class="px-4 py-2">调查组组长</td>
                                            <td class="px-4 py-2">市消防救援支队</td>
                                            <td class="px-4 py-2">138****1234</td>
                                            <td class="px-4 py-2 text-center">
                                                <button class="text-blue-500 hover:text-blue-700 mr-2">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-red-500 hover:text-red-700">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">李四</td>
                                            <td class="px-4 py-2">调查员</td>
                                            <td class="px-4 py-2">市消防救援支队</td>
                                            <td class="px-4 py-2">139****5678</td>
                                            <td class="px-4 py-2 text-center">
                                                <button class="text-blue-500 hover:text-blue-700 mr-2">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-red-500 hover:text-red-700">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="mt-2 text-right">
                                <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-sm">
                                    <i class="fas fa-plus mr-1"></i> 添加人员
                                </button>
                            </div>
                        </div>
                        
                        <div class="text-right">
                            <button class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md mr-2">
                                保存草稿
                            </button>
                            <button class="px-4 py-2 bg-blue-500 text-white rounded-md">
                                下一步 <i class="fas fa-arrow-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- AI辅助建议 -->
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-md">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-robot text-blue-500 text-xl"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-blue-800">AI助手建议</h3>
                                <div class="mt-2 text-sm text-blue-700">
                                    <p>根据您输入的案件信息，建议您：</p>
                                    <ul class="list-disc list-inside mt-1">
                                        <li>详细记录火灾现场的环境条件（如天气、温度等）</li>
                                        <li>获取火灾发生时的监控视频资料</li>
                                        <li>收集建筑消防设施运行状态报告</li>
                                        <li>详细记录第一目击者的证词</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 底部版权信息 -->
        <footer class="bg-gray-800 text-white py-6 mt-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <img src="https://via.placeholder.com/120x40?text=火调知识库" alt="Logo" class="h-10">
                        <p class="mt-2 text-gray-400">© 2023 火灾调查知识库平台 版权所有</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fas fa-envelope text-xl"></i>
                        </a>
                    </div>
                    <div class="mt-4 md:mt-0 text-gray-400">
                        <p>联系电话: 010-12345678</p>
                        <p>邮箱: contact@firekb.com</p>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-700 text-center text-gray-400">
                    <p>消防部门指定火灾调查技术服务平台</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Vue应用
        const app = Vue.createApp({
            data() {
                return {
                    // 数据可以在这里定义
                }
            },
            methods: {
                // 方法可以在这里定义
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 